<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:12:18
-->
<template>
  <div style="padding: 10px;">
    <!-- header  -->
    <div class="header">
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input placeholder="请输入工程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- table -->
    <div class="table">
      <el-table :data="EngData" style="width: 100%" >
        <el-table-column type="index" :index="1" label="序号"  align="center">
        </el-table-column>
        <el-table-column prop="engineer_name" label="工程名称" width="300" align="center">
        </el-table-column>
        <el-table-column prop="device_name" label="设备名称" align="center">
        </el-table-column>
        <el-table-column prop="bill_why" label="问题描述" width="400" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template v-slot="scope">
            <!-- 修改状态标签颜色 -->
            <el-tag v-if="scope.row.status == '待接单'" type="danger">{{ scope.row.status }}</el-tag>
            <el-tag v-else-if="scope.row.status == '进行中'" type="warning">{{ scope.row.status }}</el-tag>
            <el-tag v-else-if="scope.row.status == '已完成'" type="success">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="工单类型" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-link style="font-size: 12px;" :underline="false" type="primary" @click="toDetails(scope.row)">详细</el-link>
            <el-link style="margin-left: 5px;font-size: 12px;" :underline="false" type="danger" @click="toCancel(scope.row.id)">取消</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- pagination -->
    <div class="page" style="margin-top:10px;">
      <el-pagination 
        hide-on-single-page 
        background 
        @current-change="handleCurrentChange" 
        :current-page="params.page" 
        layout="prev, pager, next, jumper" 
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import { get} from '@/utils/request';

export default {
  data() {
    return {
      EngData: [],
      params: { page: 1, pageSize: 10 },
      total: 0
    };
  },
  methods: {
    toDetails(row) {
  // 只传递需要的字段，避免传递整个对象
  this.$router.push({ 
    path: '/order/Details', 
    query: row
  });
},
    async toCancel(id) {
      try {
        // 确认对话框
        await this.$confirm('确定要取消此工单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        // 发送取消请求
        const res = await get('/workorder/cancelOrder', { id });
        this.$notify({
          title: '操作成功',
          message: res.message || '工单取消成功',
          type: 'success'
        });
        // 刷新数据
        this.getEngData();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        }
      }
    },
    handleCurrentChange(val) {//分页切换事件处理
      this.params.page = val;
      this.getEngData();
    },
    // 获取工单数据
    async getEngData() {
      let res = await get('/workorder/pageQuery', this.params);
      this.EngData = res.data.list;
      this.total = res.data.total;
      //更新EngData和total数据
    }
  },
  created() {//组件创建时自动调用getEngData()获取初始数据
    this.getEngData();
  }
};
</script>

<style lang="scss" scoped>
.header {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.table {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1);
}
.page {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>